<template>
	<div class="list-tabs__item">
		<el-tabs>
			<el-tab-pane :label="item.title" v-for="(item, index) in list" :key="index">
				<el-scrollbar max-height="300px">
					<div class="body">
						<div class="container" @click="clickItem(item1, index1)" v-for="(item1, index1) in item.content" :key="index1">
							<div v-if="item1.avatar" class="avatar">
								<el-avatar :size="50" :src="item1.avatar"></el-avatar>
							</div>
							<div class="content">
								<div v-if="item1.title" class="title">
									<div>{{item1.title}}</div>
									<el-tag v-if="item1.tag" :type="item1.tagType">{{item1.tag}}</el-tag>
								</div>
								<div v-if="item1.desc" class="time">{{item1.desc}}</div>
								<div v-if="item1.time" class="time">{{item1.time}}</div>
							</div>
						</div>
					</div>

					<div class="actions">
						<div @click="clickAction(action, i)" class="a-item" :class="{'border': i !== action.length}" v-for="(action, i) in actions" key="i">
							<div class="a-icon">
								<component :is="`el-icon-${toLine(action.icon)}`"></component>
							</div>
							<div class="a-text">{{action.text}}</div>
						</div>
					</div>
				</el-scrollbar>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts" setup name="list">
	import {
		toLine
	} from '@/utils/main.ts'

	let props = defineProps({
		list: {
			type: Array,
			required: true
		},

		actions: {
			type: Array,
			default: () => []
		}
	})
	
	let emits = defineEmits(['clickItem', 'clickAction'])
	
	let clickItem = (item, index) => {
		emits('clickItem', {item, index})
	}
	
	let clickAction = (item, index) => {
		emits('clickAction', {item, index})
	}
</script>

<style lang="scss" scoped>
	.body {
		padding-bottom: 50px;
	}
	
	.container {
		display: flex;
		align-items: center;
		padding: 12px 20px;
		cursor: pointer;

		&:hover {
			background: #e6f6ff;
		}

		.avatar {
			flex: 1;
		}

		.content {
			flex: 3;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.time {
				font-size: 12px;
				color: #999;
				margin-top: 4px;
			}
		}
	}

	.actions {
		height: 50px;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 999;
		background: #fff;
		align-items: center;
		justify-content: space-around;
		border-top: 1px solid #eee;
		width: 100%;	

		.a-item {
			height: 50px;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;

			.a-icon {
				margin-right: 4px;
				position: relative;
				top: 2px;
			}
		}
	}

	.border {
		border-right: 1px solid #eee;
	}
</style>
